import React from 'react';
import moment from 'moment';
import { Modal, Form, Input, Select, Radio, Switch, DatePicker } from 'antd';

const FormItem = Form.Item;
const TextArea = Input.TextArea;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const formItemLayout = {
labelCol: {
  span: 5,
},
wrapperCol: {
  span: 18,
},
};
@Form.create()
export default class CaseModal extends React.Component {
  handleOk = () => { // 点击OK时，执行修改or新增
    const { dispatch, currentUser, form: { validateFields, getFieldsValue } } = this.props;
    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = {
        ...currentUser,
        ...getFieldsValue(),
      };
      const queryData = {
        case_name: data.case_name,
        precondition: data.precondition,
        case_step: data.case_step,
        test_data: data.test_data,
        assigne: data.assigne,
        comment: data.comment,
      };
      const type = 'casemanage/updateCase';// 根据是否有id
      dispatch({
        type,
        payload: {
          updateparam: queryData,
          cb: this.handleCancel,
        },
      });
    });
  };
  handleCancel = () => {
    const { form: { resetFields }, onCancel } = this.props;
    onCancel();
    resetFields();
  };
  render() {
    const { loading, visible, currentUser, form: { getFieldDecorator } } = this.props;
    const modalProps = {
      title: currentUser.id ? '修改用例' : '新增计划', // 根据主键判断是否存在数据来决定走修改还是编辑，新增情况下，不会存在id，因为currentUser为空
      visible,
      // width: 780, //默认520
      onOk: this.handleOk,
      onCancel: this.handleCancel,
      wrapClassName: 'vertical-center-modal',
      confirmLoading: loading,
      maskClosable: false,
    };
    return (
      <Modal {...modalProps}>
        <Form>
          <FormItem
            label="用例名称"
            {...formItemLayout}
          >
            {getFieldDecorator('case_name', { // 此处写的参数需与接口参数key对应
              initialValue: currentUser.case_name || '',
              rules: [
                {
                  required: true,
                  message: '请输入case_name',
                },
              ],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            label="前置条件"
            {...formItemLayout}
          >
            {getFieldDecorator('precondition', {
              initialValue: currentUser.precondition || null,
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            label="执行步骤"
            {...formItemLayout}
          >
            {getFieldDecorator('case_step', {
              initialValue: currentUser.case_step || null,
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            label="测试数据"
            {...formItemLayout}
          >
            {getFieldDecorator('test_data', {
              initialValue: currentUser.test_data || null,
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            label="开发负责人"
            {...formItemLayout}
          >
            {getFieldDecorator('assigne', {
              initialValue: currentUser.assigne || null,
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            label="备注"
            {...formItemLayout}
          >
            {getFieldDecorator('comment', {
              initialValue: currentUser.comment || null,
            })(
              <Input />
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}
